<template>
  
</template>

<script>
import { mapState } from 'vuex';

export default {
    name: 'myMenu',
    data(){
        return {
            list: [],
        }
    },
    computed: {
        ...mapState('user', ['user']),
    },
    methods: {
        getMenuList(authList){
            let menu = [];
            let map = {};
            authList.forEach((item) => {
                item.children = [];
                map[item.id] = item;s
                if(item.pid === -1){
                    menu.push(item);
                }else{
                    map[item.pid] && map[item.pid].children.push(item);
                }   
            });

            return menu;
        }
    },
    mounted() {
        this.list = this.getMenuList(this.userInfo.authList);
    },
    render(){
        let renderChildren = (list)=>{//渲染孩子的菜单
               return list.map(child=>{
                return child.children.length ? 
                <el-submenu index={child._id}>
                    <div slot="title">{child.name}</div>
                    {/* 如果有孩子的话继续渲染 -- 递归 */}
                    {renderChildren(child.children)}
                </el-submenu>:
                //自己对应当前的路径
                <el-menu-item index={child.path}>{child.name}</el-menu-item>
            })
        }
        return <el-menu
            background-color="#333"
            text-color="#fff"
            active-text-color="#ffd04b"
            router={true}
        >
            {renderChildren(this.list)}
      </el-menu> 
    }
}
</script>

<style>

</style>